<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="上牌费用信息" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                   labelWidth="auto">
          <uni-forms-item label="合计费用:" name="sumPrice" :required="boole">
            <text class="sumPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.sumPrice" disabled
                           placeholder="请输入合计费用(验车费用+上牌费用+拍照邮寄费用)"/>
            <text v-else> {{ ruleForm.sumPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="验车费用:" name="checkCarPrice" :required="boole">
            <text class="checkCarPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.checkCarPrice"
                           @clear="clear('checkCarPrice')"
                           @blur="blurAmount('checkCarPrice')"
                           placeholder="请输入验车费用"/>
            <text v-else> {{ ruleForm.checkCarPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="上牌费用:" name="registerPrice" :required="boole">
            <text class="registerPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.registerPrice"
                           @clear="clear('registerPrice')"
                           @blur="blurAmount('registerPrice')"
                           placeholder="请输入上牌费用"/>
            <text v-else> {{ ruleForm.registerPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="牌照邮寄费用:" name="photoMailPrice" :required="boole">
            <text class="photoMailPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.photoMailPrice"
                           @clear="clear('photoMailPrice')"
                           @blur="blurAmount('photoMailPrice')"
                           placeholder="请输入牌照邮寄费用"/>
            <text v-else> {{ ruleForm.photoMailPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="是否限牌城市:" name="isLimitCity" :required="boole">
            <text class="isLimitCity"/>
            <uni-data-select v-if="boole" v-model="ruleForm.isLimitCity" :localdata="range"
                             placeholder="请选择是否限牌城市"
                             :clear="true" filterable/>
            <text v-else> {{
                ruleForm.isLimitCity == '1' ? '是' : ruleForm.isLimitCity == '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="指标所属城市:" name="indexBelongCity" :required="boole"
                          v-if="ruleForm.isLimitCity == '1'">
            <text class="indexBelongCity"/>
            <is-limit-city v-if="boole" v-model="ruleForm.indexBelongCity" :localdata="range" :clear="true"
                           filterable @change="handleCity"/>
            <text v-else> {{ ruleForm.indexBelongCity || '-' }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="指标类型:" name="indexType" :required="boole" v-if="ruleForm.isLimitCity === '1'">
            <text class="indexType"/>
            <uni-data-select v-if="boole" v-model="ruleForm.indexType" :localdata="rangeType"
                             placeholder="请选择指标类型"
                             :clear="true" filterable/>
            <text v-else> {{ handleLabel(dict.type.online_offline, ruleForm.indexType) }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="付款类型:" name="payType" v-if="ruleForm.isLimitCity === '1'" :required="boole">
            <text class="payType"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.payType" :localdata="payTypeList" dataKey="label"
                                 placeholder="请选择付款类型" dataValue="value" :clear="true" filterable/>
            <text v-else> {{ handleLabel(payTypeList, ruleForm.payType) }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="付款类型:" v-else>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.payType" :localdata="payTypeList" dataKey="label"
                                 placeholder="请选择付款类型" dataValue="value" :clear="true" filterable/>
            <text v-else> {{ handleLabel(payTypeList, ruleForm.payType) }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="备注:">
            <uni-easyinput type="textarea" v-if="boole" :maxlength="490" v-model="ruleForm.remark" placeholder="请输入备注"/>
            <text v-else>{{ ruleForm.remark || '-' }}</text>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>
import ProvinceCityDistrict from "@/pages/CarPage/gps/components/provinceCityDistrict.vue";
import isLimitCity from './isLimitCity.vue'
import {getInfoByCityIdAndType} from "@/api/upCard";
import * as utils from '@/pages/quota/libs/utils.js';
import {toNumberAdd} from "@/pages/quota/libs/utils.js";

export default {
  name: "upCardInfo", //上牌费用信息
  dicts: ["online_offline"],
  components: {ProvinceCityDistrict, isLimitCity},
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {},
  data() {
    return {
      range: [
        {value: "1", text: "是"},
        {value: "2", text: "否"},
      ],
      rangeType: [
        {value: "1", text: "燃油"},
        {value: "2", text: "新能源"},
      ],
      payTypeList: [
        {value: "1", label: "车管垫付，走报销，月结"},
        {value: "2", label: "公对公"},
      ],
      rules: {
        sumPrice: {
          rules: [
            {
              required: true,
              errorMessage: "验车费用+上牌费用+拍照邮寄费用",
              validateTrigger: "blur",
            },
          ],
        },
        checkCarPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入验车费用",
              validateTrigger: "blur",
            },
          ],
        },
        registerPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入上牌费用",
              validateTrigger: "blur",
            },
          ],
        },
        photoMailPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入牌照邮寄费用",
              validateTrigger: "blur",
            },
          ],
        },
        isLimitCity: {
          rules: [
            {
              required: true,
              errorMessage: "请选择是否限牌城市",
              validateTrigger: "bind",
            },
          ],
        },
        indexType: {
          rules: [
            {
              required: true,
              errorMessage: "请选择指标类型",
              validateTrigger: "bind",
            },
          ],
        },
        payType: {
          rules: [
            {
              required: true,
              errorMessage: "请选择付款类型",
              validateTrigger: "bind",
            },
          ]
        },
        indexBelongCity: {
          rules: [
            {
              required: true,
              errorMessage: '请选择指标城市',
              validateTrigger: "bind",
            }
          ]
        }
      },

    };
  },
  created() {
  },
  mounted() {

  },
  methods: {
    validateIndexBelongCity(obj) {

      return getInfoByCityIdAndType(obj).then(res => {
        if (res === false) {
          this.value.indexBelongCity = this.ruleForm.indexBelongCity = ''
          this.value.indexBelongCityId = this.ruleForm.indexBelongCityId = ''
          this.value.areaName = this.ruleForm.areaName = ''
          this.value.areaNameId = this.ruleForm.areaNameId = ''
          this.$set(this.ruleForm, 'indexBelongCity', '')
          this.rules.indexBelongCity.rules = [
            {
              required: true,
              errorMessage: '所选城市没有指标类型',
              validateTrigger: "bind",
            }
          ]
          this.$nextTick(_ => {
            this.$refs.ruleForm.validateField(['indexBelongCity']).then(res => {

            }).catch(err => {

            })
          })
        }
      });
    },

    handleSumPrice() {
      let num = 0;
      num = utils?.toNumberAdd(utils?.toNumberAdd(
          Number(this.value.checkCarPrice),
          Number(this.value.registerPrice),
      ), Number(this.value.photoMailPrice))
      if (num) {
        this.value.sumPrice = this.ruleForm.sumPrice =
            num.toString().match(/^\d+(?:\.\d{0,2})?/)[0] || 0;
      }
    },

    blurAmount(str) {
      if (this.ruleForm[str]) {
        let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
        if (!msg.test(this.ruleForm[str])) {
          this.ruleForm[str] = "";
        } else {
          this.ruleForm[str] = this.ruleForm[str]
              .toString()
              .match(/^\d+(?:\.\d{0,2})?/)[0];
          this.handleSumPrice();
        }
      }
    },
    clear(str){
      this.value[str] = this.ruleForm[str] = ''
      this.handleSumPrice();
    },

    handleCity(val) {
      if (val && val.length > 0) {
        this.value.indexBelongCity = this.ruleForm.indexBelongCity = val[1].text
        this.value.indexBelongCityId = this.ruleForm.indexBelongCityId = val[1].value
        this.value.areaName = this.ruleForm.areaName = val[0].text
        this.value.areaNameId = this.ruleForm.areaNameId = val[0].value
        let obj = {
          cityId: this.value.indexBelongCityId,
          type: this.value.isLimitCity
        };
        this.validateIndexBelongCity(obj)
      } else {
        this.value.indexBelongCity = this.ruleForm.indexBelongCity = ''
        this.value.indexBelongCityId = this.ruleForm.indexBelongCityId = ''
        this.value.areaName = this.ruleForm.areaName = ''
        this.value.areaNameId = this.ruleForm.areaNameId = ''
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
            .validate()
            .then((res) => {
              resolve();
            })
            .catch((err) => {
              let key = ".flex-col" + ">>>" + "." + err[0].key;
              reject(key);
            });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


